<%@ page language="java"   pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<title>Flexigrid</title>
</head>
<body>

 
height: 200, //flexigrid插件的高度，单位为px
width: ‘auto’, //宽度值，auto表示根据每列的宽度自动计算
striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
novstripe: false,
minwidth: 30, //列的最小宽度
minheight: 80, //列的最小高度
resizable: true, //是否可伸缩
url: false, //ajax方式对应的url地址
method: ‘POST’, // 数据发送方式
dataType: ‘xml’, // 数据加载的类型
errormsg: ‘Connection Error’,//错误提升信息
usepager: false, //是否分页
nowrap: true, //是否不换行
page: 1, //默认当前页
total: 1, //总页面数
useRp: true, //是否可以动态设置每页显示的结果数
rp: 15, // 每页默认的结果数
rpOptions: [10,15,20,25,40],//可选择设定的每页结果数
title: false,//是否包含标题
pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式
procmsg: ‘Processing, please wait …’,//正在处理的提示信息
query: ”,//搜索查询的条件
qtype: ”,//搜索查询的类别
nomsg: ‘No items’,//无结果的提示信息
minColToggle: 1, //minimum allowed column to be hidden
showToggleBtn: true, //show or hide column toggle popup
hideOnSubmit: true,//隐藏提交
autoload: true,//自动加载
blockOpacity: 0.5,//透明度设置
onToggleCol: false,//当在行之间转换时
onChangeSort: false,//当改变排序时
onSuccess: false,//成功后执行
onSubmit: false // 调用自定义的计算函数 

query//点击放大镜出现搜索功能,是Input文本框的值 
qtype//是搜索功能后面的select的值 
根据query的操作判断是模糊查询还是全部查询数据.

	<table id="flexme1" class="tablesorter" >
		<thead>
			<tr>
				<th width="150px">Col 1</th>
				<th width="150px">Col 2</th>
				<th width="250px">Col 3 is a long header name</th>
				<th width="150px">Col 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>This is data 1 with overflowing content</td>
				<td>This is data 20</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 12</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 23</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 42</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 12</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 11</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 32</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
		</tbody>
	</table>

	<h2>Example 2</h2>
	<p>
		Table converted into flexigrid with height, and width set to auto,
		stripes remove. (<a href="#"
			onclick="$(this).parent().next().toggle(); return false;">Show
			sample code</a>)
	</p>
	<div class="code">
		<pre>$('.flexme2').flexigrid({height:'auto',striped:false});</pre>
	</div>
	<table class="flexme2">
		<thead>
			<tr>
				<th width="100">Col 1</th>
				<th width="100">Col 2</th>
				<th width="100">Col 3 is a long header name</th>
				<th width="300">Col 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>This is data 1 with overflowing content</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
			<tr>
				<td>This is data 1</td>
				<td>This is data 2</td>
				<td>This is data 3</td>
				<td>This is data 4</td>
			</tr>
		</tbody>
	</table>

	<h2>Example 23</h2>
	</div>
	<table class="flexme3" style="display: none;"></table>
	</body>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/comstyle/flexigrid/flexigrid.css" />
	<jsp:include page="/common/jquery.jsp"/>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/flexigrid/flexigrid3.js"></script>
	
		<link rel="stylesheet" href="${pageContext.request.contextPath}//comstyle/jquerytablesorter/themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />
		<script type="text/javascript" src="${pageContext.request.contextPath}//js/jquery/jquery.tablesorter.min.js"></script>
	
	
	<script type="text/javascript">
		//$('.flexme1').flexigrid();
		
		$(document).ready(function() {
	// call the tablesorter plugin
	$("#flexme1").tablesorter();
}); 
		
		
		$('.flexme2').flexigrid({ 
			height : 'auto',
			striped : false
		});

		$(".flexme3").flexigrid({
			url : 'flexigriddata2.js',
			dataType: 'json',
	colModel : [
		{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
		{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
		{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
		{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
		{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
		],
	buttons : [
		{name: 'Add', bclass: 'add', onpress : test},
		{name: 'Delete', bclass: 'delete', onpress : test},
		{separator: true}
		],
	searchitems : [
		{display: 'ISO', name : 'iso'},
		{display: 'Name', name : 'name', isdefault: true}
		],
	sortname: "iso",
	sortorder: "asc",
	usepager: true,
	title: '标题',
	useRp: true,
	rp: 15,// 每页默认的结果数
	rpOptions: [10,15,20,25,40],//可选择设定的每页结果数
	pagestat: '显示 {from} 到 {to}， 共 {total} 条记录',//显示当前页和总页面的样式
	procmsg: '正在为您努力加载中 …',//正在处理的提示信息
	nomsg: '没有数据',//无结果的提示信息
    onError: '查询出错，请刷新',
	showTableToggleBtn: true,
	width: 'auto',
	errormsg:"加载失败，请稍后再试",
	pagetext: '第',
	outof: '页,总页数',
	findtext: '查找',
	checkbox:true,//是否要多选框
rowId:'id',//绑定行的id
	height: 200
		});

		function test(com, grid) {
			if (com == 'Delete') {
				confirm('Delete ' + $('.trSelected', grid).length + ' items?')
			} else if (com == 'Add') {
				alert('Add New Item');
			}
		}
	</script>
	
</body>
</html>